import { Table, Button, Space, Modal, message, Tag } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import React, { useState, useEffect } from 'react'
import { useSearchParams } from 'react-router-dom'
import axios from 'axios'
const { confirm } = Modal

const Page1 = () => {
  const columns = [
    {
      title: '名称',
      dataIndex: 'datasourceName',
      key: 'datasourceName',
    },
    {
      title: '端口',
      dataIndex: 'port',
      key: 'port',
    },
    {
      title: 'ip',
      dataIndex: 'ip',
      key: 'ip',
    },
    {
      title: '类型',
      dataIndex: 'protocolType',
      key: 'protocolType',
    },
    {
      title: '用户名',
      dataIndex: 'ftpUsername',
      key: 'ftpUsername',
    },
    {
      title: '密码',
      dataIndex: 'ftpPassword',
      key: 'ftpPassword',
    },
    {
      title: '是否启用',
      dataIndex: 'available',
      key: 'available',
      render: (available, record) => (
        <Tag color={available == 0 ? 'green' : 'red'} key={Math.random()}>
          {available == 0 ? '成功' : '失败'}
        </Tag>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => showModal(record)}>编辑</Button>
          <Button type="primary" onClick={() => showConfirm(record)}>删除</Button>
        </Space>
      ),
    },
  ]
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [dataSource, setDataSource] = useState([])
  const [total, setTotal] = useState(1)
  const [searchParams, setSearchParams] = useSearchParams()
  console.log(searchParams.get('id'), 'page1收到的数据')

  useEffect(() => {
    // axios.get('/api/JobFtpDatasoutce/queryList?pageSize=10&pageNo=1').then(res => {
    //   console.log(res, 11111)
    //   message.success('列表请求成功')
    //   setDataSource(res.data.content)
    //   setTotal(res.data.total)
    // })
  }, [])
  const add = () => {
    let oldDataSource = JSON.parse(JSON.stringify(dataSource))
    setDataSource(oldDataSource)
  }
  const showModal = () => {
    setIsModalVisible(true)
  }
  const showConfirm = (record) => {
    confirm({
      title: '确定删除本条数据吗?',
      icon: <ExclamationCircleOutlined />,
      content: '',
      onOk () {
        let oldDataSource = JSON.parse(JSON.stringify(dataSource))
        oldDataSource.pop()
        setDataSource(oldDataSource)
      },
      onCancel () {
        console.log('Cancel')
      },
    })
  }
  const handleOk = () => {
    setIsModalVisible(false)
  }

  const handleCancel = () => {
    setIsModalVisible(false)
  }
  const onChange = (page, pageSize) => {
    console.log(page, pageSize)
    axios.get('/api/JobFtpDatasoutce/queryList?pageSize=' + pageSize + '&pageNo=' + page).then(res => {
      console.log(res, 11111)
      message.success('列表请求成功')
      setDataSource(res.data.content)
    })
  }
  return (
    <div>
      <Button type="primary" onClick={add}>新增数据</Button>
      <Table rowKey={columns => columns.id} dataSource={dataSource} columns={columns} pagination={{
        onChange: onChange,
        total,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: total => `共 ${total} 条`
      }} />
      <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </div>
  )
}

export default Page1
